<template>
    <div id="index">
        <!-- 头部背景图 -->
        <div class="topbg">
          <img src="../assets/image/index/topbg.jpg" alt="">
            <div class="topbg-textbox">
                <div class="topbg-text">MONI Teach you how to learn to</div>
                <div class="topbg-text">drive easily</div>
                <div class="topbg-info">模拟驾驶软件，墨泥给你一个轻松舒适的学车过程</div>
                <div class="btnbox">
                    <button class="btn-more" @click="tocard()">下滑了解</button>
                    <button class="btn-read" @click="tocard()">Read More</button>
                </div>
            </div>
        </div>

        <!-- 卡片切换图 -->
        <div class="cardBanner" ref="card">
          <ul>
            <li v-for="(item,index) in cardData1" :key="index">
              <img :src="item.src" alt="">
            </li>
            <div class="arrow-left" @click="toggleFun1(-1)">&lt;</div>
            <div class="arrow-right" @click="toggleFun1(1)">&gt;</div>
          </ul>
       </div>
       <!-- </div> -->

      <!-- 模拟驾驶软件第一部分 -->
       <div class="part-head-one-1">模拟驾驶软件</div>
       <div class="part-head-one-2">科腾、安路迪集成加密家庭版，不支持墨泥蓝色加密锁</div>
       <div class="part-head-one-2">即免加密锁版本</div>
         <!-- 软件部分 -->
       <div class="part-onebox">
            <!-- 左边软件列表 -->
          <div class="soft-box">
            <div class="soft-list">

               <div class="soft" v-for="(item,index1) in family_nonekey_data" :key="index1">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
            </div>
           <div class="soft-bottom-img">
             <img src="../assets/image/index/260~146/260x146-4.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-6.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-7.jpg" alt="">
           </div>
          </div>
           <!-- 右边生产厂家 -->
           <div class="producer-list">
             <div class="family-producer">
               <p>家庭版商家</p>
             </div>

             <div class="producer-box" v-for="(item,index2) in family_producer_data" :key="'info2'+index2" @click="buy(item.shopurl)">
               <p class="producer-name">{{item.shopname}}</p>
               <div class="producer-content-box"> 
                 <div class="producer-img">
                   <img :src="item.picname" alt="">
                 </div>
                 <div class="producer-text">
                   {{item.shopintr}}
                 </div>
               </div>
             </div>

             <div class="family-producer">
               <p>企业与专业版商家</p>
             </div>

             <div class="producer-box" v-for="(item,index3) in company_producer_data" :key="index3" @click="buy(item.website)">
               <p class="producer-name">{{item.name}}</p>
               <div class="producer-content-box"> 
                 <div class="producer-img">
                   <img :src="item.url" alt="">
                 </div>
                 <div class="producer-text">
                   <p>联系人：{{item.director}}</p>
                   <p>电话：{{item.tel}}</p>
                   <p>公司简介：{{item.description}}</p>
                 </div>
               </div>
             </div>

              <!-- 右边底部二维码联系 -->
             <div class="relate-box">
               <div class="erweima">
                 <img src="../assets/image/index/wx.jpg" alt="">
               </div>
               <p style="color:#2F2FE8">联系我们</p>
               <p>邮箱：moni@moni.cn</p>
               <p>电话：4000565758</p>
               <p>Q Q：130442222</p>
               <p>网址：www.moni.cn</p>
               <p>微信公众号：墨泥学车（扫描二维码，关注墨泥学车）</p>
             </div>
           </div>
       </div>

      <!-- 模拟驾驶软件第二部分 -->
       <div class="part-head-one-1" style="margin-top:5rem">模拟驾驶软件</div>
       <div class="part-head-one-2">加密锁家庭版，需要有下图所示“墨泥”蓝色加密锁</div>
       <div class="part-head-one-2">配合下图加密锁使用，支持类似下图的学车方向盘，但</div>
       <div class="part-head-one-2">不仅限以下样式、支持按键自行设置（必须购买加密锁</div>
       <div class="part-head-one-2">才能使用）</div>

       <div class="jiamisuo">
         <img src="../assets/image/index/jiamisuo.jpg" alt="" @click="buysuo()">
       </div>

          <!-- 卡片切换 -->
       <div class="cardBanner">
          <ul>
            <li v-for="(item,index) in cardData2" :key="index">
              <img :src="item.src" alt="" style="width:10rem; height:10rem">
            </li>
            <div class="arrow-left" @click="toggleFun(-1)">&lt;</div>
            <div class="arrow-right" @click="toggleFun(1)">&gt;</div>
          </ul>
       </div>

       <div class="part-onebox">
          <div class="soft-box2">
            <div class="soft-list">
               <div class="soft" v-for="(item,index4) in family_key_data" :key="index4">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
           </div>

           <div class="soft-bottom-img">
             <img src="../assets/image/index/260~146/260x146-8.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-9.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-10.jpg" alt="">
           </div>
          </div>
       </div>

      <!-- 模拟驾驶软件专业单屏版---第三部分 -->
      <div class="part-head-one-1" style="margin-top:5rem">模拟驾驶软件专业单屏版（免费升级）</div>
      <div class="part-head-one-2">专业单屏软件需要和墨泥主控板、传感器、右图墨泥</div>
      <div class="part-head-one-2">锁等配合使用，能输出驾校指纹仪计时器信号，输出</div>
      <div class="part-head-one-2">真车仪表盘信号（包括发动机转速信号、车速信号、</div>
      <div class="part-head-one-2">手刹信号、转向灯信号等）。支持类似下图模拟器，</div>
      <div class="part-head-one-2">但不仅限以下样式。</div>

        <!-- 列表 -->
        <div class="part-onebox">
          <div class="soft-box2">
            <div class="soft-bottom-img3">
             <img src="../assets/image/index/260~146/260x146-101.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-81.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-111.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-91.jpg" alt="">
           </div>
            <div class="soft-list">
               <div class="soft" v-for="(item,index5) in profession_one_data" :key="index5">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
           </div>
          </div>
        </div>

      <!-- 模拟驾驶软件专业三屏版---第四部分 -->
      <div class="part-head-one-1" style="margin-top:5rem">模拟驾驶软件专业三屏版（免费升级）</div>
      <div class="part-head-one-2">专业三屏软件在继承了单屏软件所有功能的前提下，</div>
      <div class="part-head-one-2">支持三个屏幕显示，视野更加开阔，沉浸感更强。三</div>
      <div class="part-head-one-2">屏模拟器外观类似下图，但不仅限以下样式。</div>

        <!-- 列表 -->
        <div class="part-onebox">
          <div class="soft-box2">
            <div class="soft-bottom-img3">
             <img src="../assets/image/index/zysp2.jpg" alt="">
             <img src="../assets/image/index/zysp3.jpg" alt="">
             <img src="../assets/image/index/zysp1.jpg" alt="">
           </div>
            <div class="soft-list">
               <div class="soft" v-for="(item,index6) in profession_three_data" :key="index6">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
            </div>
          <div class="sanp-img">
            <img src="../assets/image/index/sanping.png" alt="">
          </div>
        </div>

      <!-- 模拟驾驶软件企业单屏版---第五部分 -->
      <div class="part-head-one-1" style="margin-top:5rem">模拟驾驶软件企业单屏版（免费升级）</div>
      <div class="part-head-one-2">企业单屏软件需要和墨泥主控板、传感器、墨泥锁等</div>
      <div class="part-head-one-2">配合使用，支持电机方向机（方向盘反力可调、可设</div>
      <div class="part-head-one-2">置电动随速反力、过颠簸路面方向盘振动、爆胎时方</div>
      <div class="part-head-one-2">向盘偏转等），能输出驾校指纹仪计时器信号，输出</div>
      <div class="part-head-one-2">真车仪表盘信号（包括发动机转速信号、车速信号、</div>
      <div class="part-head-one-2">手刹信号、转向灯信号等）。支持类似下图模拟器，</div>
      <div class="part-head-one-2">但不仅限以下样式。</div>

        <!-- 列表 -->
        <div class="part-onebox">
          <div class="soft-box2">
            <div class="soft-bottom-img3">
             <img src="../assets/image/index/260~146/260x146-101.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-81.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-111.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-91.jpg" alt="">
           </div>
            <div class="soft-list">
               <div class="soft" v-for="(item,index7) in company_one_data" :key="index7">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
           </div>
           <div class="soft-bottom-img">
             <img src="../assets/image/index/260~146/260x146-11-aa.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-11-bb.jpg" alt="">
             <img src="../assets/image/index/260~146/260x146-11-cc.jpg" alt="">
           </div>
          </div>
        </div>

        <!-- 模拟驾驶软件企业三屏版---第六部分 -->
      <div class="part-head-one-1" style="margin-top:5rem">模拟驾驶软件企业三屏版（免费升级）</div>
      <div class="part-head-one-2">企业三屏软件需要和墨泥主控板、传感器、墨泥锁等</div>
      <div class="part-head-one-2">配合使用，支持三屏显示，支持电机方向机（方向盘</div>
      <div class="part-head-one-2">反力可调、可设置电动随速反力、过颠簸路面方向盘</div>
      <div class="part-head-one-2">振动、爆胎时方向盘偏转等），能输出驾校指纹仪计</div>
      <div class="part-head-one-2">时器信号，输出真车仪表盘信号（包括发动机转速信</div>
      <div class="part-head-one-2">号、车速信号、手刹信号、转向灯信号等）。支持类</div>
      <div class="part-head-one-2">似下图模拟器，但不仅限以下样式。</div>

        <!-- 列表 -->
        <div class="part-onebox">
          <div class="soft-box2">
            <div class="soft-bottom-img3">
             <img src="../assets/image/index/zysp2.jpg" alt="">
             <img src="../assets/image/index/zysp3.jpg" alt="">
             <img src="../assets/image/index/zysp1.jpg" alt="">
           </div>
            <div class="soft-list">
               <div class="soft" v-for="(item,index8) in company_three_data" :key="index8">
                   <img src="../assets/image/logo.png" alt="">
                   <p class="size">{{item.size}}M</p>
                   <p class="type">{{item.title}}</p>
                   <p class="update"><span style="color:red">更新日期</span>：{{item.updateTime}}</p>
                   <p class="tiquma"><span style="color:red">网盘提取码</span>：{{item.description}}</p>
                   <div class="down-btn">
                       <button @click="baidudown(item.diskAddress)">百度网盘下载</button>
                       <button @click="bendidown(item.address)">本地下载</button>
                       <button v-show="!(item.link == `#`)" @click="toshuoming(item.link)">使用说明</button>
                   </div>
               </div>
           </div>
          </div>
          <div class="sanp-img">
            <img src="../assets/image/index/sanping1.png" alt="">
          </div>
        </div>
      <div class="bottom-bg">
      <!-- 电动车模拟驾驶---第七部分 -->
      <div class="part-head-one-1" style="margin-top:5rem" @click="cardetail(1)">电动车模拟驾驶（项目定制）</div>
      <div class="part-head-one-2">电动车是整车，再配上投影等设备，模拟效果逼真，</div>
      <div class="part-head-one-2">驾驶感十足。以项目合作的方式，车辆为客户自己提</div>
      <div class="part-head-one-2">供，本公司提供驾驶模拟技术支持。点击标题和图片</div>
      <div class="part-head-one-2">可以查看产品详情。</div>

      <div class="three-buttom">
        <img src="../assets/image/index/260x173-d1.jpg" alt="" @click="cardetail(1)">
        <img src="../assets/image/index/260x173-d2.jpg" alt="" @click="cardetail(1)">
        <img src="../assets/image/index/260x173-d3.jpg" alt="" @click="cardetail(1)">
      </div>

      <!-- 六自由度感动模拟驾驶---第八部分 -->
      <div class="part-head-one-1" style="margin-top:5rem" @click="cardetail(2)">六自由度动感模拟驾驶（项目定制）</div>
      <div class="part-head-one-2">六自由度平台定制软件，模拟驾驶上下坡、颠簸路面</div>
      <div class="part-head-one-2">等。 六自由度动感汽车驾驶模拟器约长2m，宽3m，</div>
      <div class="part-head-one-2">高3m，大体分两大部分：上面驾驶舱部分；下面是</div>
            <div class="part-head-one-2">看产品详情。</div>

      <div class="three-buttom">
        <img src="../assets/image/index/260x195-l1.jpg" alt="" @click="cardetail(2)">
        <img src="../assets/image/index/260x195-l2.jpg" alt="" @click="cardetail(2)">
        <img src="../assets/image/index/260x195-l3.jpg" alt="" @click="cardetail(2)">
      </div>
    </div>
  </div>
  <!-- footer -->
    <div class="footer-bg">
        <div class="Footer">
        <ul>
            <a href="http://www.beep.cn/" target="_blank"><li>必普网</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>汽车模拟器</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>墨泥网</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>模拟驾驶</li></a>
        </ul>
        <div>备案号：赣ICP备14004824号-1</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
// var Event = new Vue();
export default {
    name:"index",
    data(){
        return{
          cardData1:[
              {id:1,src:require('../assets/image/index/427~240/427x240_km2.jpg')},
              {id:2,src:require('../assets/image/index/427~240/427x240_km3.jpg')},
              {id:3,src:require('../assets/image/index/427~240/427x240_xhcs.jpg')},
              {id:4,src:require('../assets/image/index/427~240/427x240_yingwen.jpg')},
              {id:5,src:require('../assets/image/index/427~240/427x240_yingwen2.jpg')},
              {id:6,src:require('../assets/image/index/427~240/427x240_yingwen3.jpg')},
              {id:7,src:require('../assets/image/index/427~240/427x240_yingwen4.jpg')},
              {id:8,src:require('../assets/image/index/427~240/427x240_zhujiemian.jpg')}
          ],
          cardData2:[
              {id:1,src:require('../assets/image/index/jtb111.jpg')},
              {id:2,src:require('../assets/image/index/jtb222.jpg')},
              {id:3,src:require('../assets/image/index/jtb333.jpg')},
              {id:4,src:require('../assets/image/index/jtb444.jpg')},
              {id:5,src:require('../assets/image/index/jtb555.jpg')},
              {id:6,src:require('../assets/image/index/jtb666.jpg')}
          ],
          family_nonekey_data:'', //家庭免加密版
          family_key_data:'',  //家庭加密版
          profession_one_data:'',  //专业单屏版
          profession_three_data:'', //专业三屏版
          company_one_data:'',  //企业单屏版
          company_three_data:'',  //企业三屏版

          family_producer_data:'',//家庭版商家
          company_producer_data:'',  //企业版商家
        }
    },
  methods: {
    tocard(){
      this.$refs["card"].scrollIntoView({
        behavior:"smooth"
      });
    },
    toggleFun(p){
				this.cardData2 = this.cardData2.map((item,index,array) => {
					if(index===array.length-1&&p===1){
						item = array[0]
					}
					else if(index===0&&p===-1){
						item = array[array.length-1];
					}else{
						item = array[index+p];
					}
					return item;
				})
		},
    toggleFun1(p){
				this.cardData1 = this.cardData1.map((item,index,array) => {
					if(index===array.length-1&&p===1){
						item = array[0]
					}
					else if(index===0&&p===-1){
						item = array[array.length-1];
					}else{
						item = array[index+p];
					}
					return item;
				})
		},
    // 说明
    toshuoming(i){
      window.open(i,'_blank')
    },
    // 电动车和六自由度跳转详情页
    cardetail(a){
      if(a==1){
        this.$router.push('/diandongche');
      }
      if(a==2){
        this.$router.push('/donggan');
      }
    },
    // 百度网盘下载
    baidudown(url){
      window.open(url,'_self');
    },
    // 本地下载
    bendidown(url){
      window.open(url,'_self');
    },
    // 跳转淘宝
    buy(a){
      window.open(a,'_blank');
    },
    //点击购买加密锁
    buysuo(){
      window.open("https://item.taobao.com/item.htm?id=630783903083",'_blank')
      },
      // axios
      // 获取免加密家庭版数据
      get_family_nonekey(){
        axios({
          url: `http://47.97.155.31:8080/index/list/2`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("免加密家庭版连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.family_nonekey_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 获取家庭代理厂商
      get_family_producer(){
        axios({
          url: `http://47.97.155.31:8080/index/family`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            //console.log("加密家庭版连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.family_producer_data = res.data.data;
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 获取企业版商家
      get_company_producer(){
        axios({
          url: `http://47.97.155.31:8080/index/company`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.company_producer_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 获取加密锁家庭版
      get_family_key(){
        axios({
          url: `http://47.97.155.31:8080/index/list/3`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.family_key_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },

      // 获取专业单屏版
      get_profession_one(){
        axios({
          url: `http://47.97.155.31:8080/index/list/4`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.profession_one_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 专业三屏版
      get_profession_three(){
        axios({
          url: `http://47.97.155.31:8080/index/list/5`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.profession_three_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 获取企业单屏版
      get_company_one(){
        axios({
          url: `http://47.97.155.31:8080/index/list/10`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.company_one_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
      // 获取企业三屏版
      get_company_three(){
        axios({
          url: `http://47.97.155.31:8080/index/list/11`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.company_three_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
  },
  mounted(){
    this.get_family_nonekey();
    this.get_family_key();
    this.get_family_producer();
    this.get_company_producer();
    this.get_profession_one();
    this.get_profession_three();
    this.get_company_one();
    this.get_company_three();
  }
}
</script>

<style scoped>
.topbg{
    /* position: absolute;
    top: 0; */
    z-index:-1;
    width:100%;
    height: 40rem;
    /* background: url("../assets/image/index/topbg.jpg"); */
    /* background-size:100% 100%; */
}
.topbg-textbox{
    position: absolute;
    top: 15rem;
    right: 15%;
    color: white;
}
.topbg img{
  width: 100%;
  /* z-index: -100; */
}
.topbg-text{
    font-size: 1.2rem;
}
.topbg-info{
    font-size: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.btnbox{
    display: flex;
}
.btnbox button{
    width: 6rem;
    height: 2rem;
    outline: none;
    font-size: 0.8rem;
}
.btn-more{
    background-color: white;
    color: #0D7AF9;
    border: 0;
    cursor: pointer;
}
.btn-read{
    background-color:rgba(1, 1, 1, 0);
    color: white;
    border: 1px solid white;
    margin-left: 1rem;
    cursor: pointer;
}

/*卡片轮播图*/

/* 第一部分头部文字 */
.part-head-one-1{
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    color: gray;
    margin-bottom: 0.5rem;
}
.part-head-one-2{
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #2F2FE8;
    /* margin-top: 0.5rem; */
}

.part-onebox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.soft-box{
  width: 65%;
  background: url("../assets/image/index/textbg.jpg");
  /* background-size:100% 100%; */
  padding: 0 1rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.soft-box2{
  width: 100%;
  background: url("../assets/image/index/textbg.jpg");
  /* background-size: cover; */
  padding: 0 5rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.soft-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 1rem 2rem;
}
.producer-list{
  width: 35%;
}
/* 软件盒子 */
.soft{
    width: 15rem;
    background: url("../assets/image/index/text-bac.jpg");
    background-size: cover;
    padding: 1rem;
    margin-top: 1rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.8rem;
    color: #494949;
}
.soft img{
    width: 3rem;
}
.size{
    margin-bottom:0.5rem;
}
.update{
    margin-top: 3rem;
    text-align: left;
}
.tiquma{
    margin-top: 1rem;
    text-align: left;
}
.down-btn{
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
}
.down-btn button{
    font-size: 0.8rem;
    outline: none;
    border: 1px solid #2F2FE8;
    background-color: rgba(1, 1, 1, 0);
    padding: 0.2rem;
    color: #2F2FE8;
    cursor: pointer;
}
/* 左边底部图片 */
.soft-bottom-img{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.soft-bottom-img2{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 3rem;
  /* margin: 0 auto; */
}
.soft-bottom-img3{
   width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 3rem;
}
/* .soft-bottom-img img{
  width: 32%;
}
.soft-bottom-img3 img{
  width: 20%;
} */
/* 商家模块 */
.family-producer{
  background: url("../assets/image/details/textkuang.png");
  background-size:100%;
  background-repeat: no-repeat;
  width: 60%;
  height: 4rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2F2FE8;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-left: 10%;
}

.producer-box{
  width: 80%;
  /* background-color: #0D7AF9; */
  box-shadow: 0 0 4px gray;
  color: #494949;
  margin: 0 auto;
  cursor: pointer;
  font-size: 0.8rem;
}
.producer-name{
  margin-left: 1rem;
}
.producer-content-box{
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  justify-content: space-between;
  padding: 0.5rem;
  margin-bottom:3rem;
}
.producer-img{
  width: 30%;
}
.producer-box img{
  width: 100%;
  /* height: 100%; */
}
.producer-text{
  width: 65%;
}

/* 右边二维码部分 */
.relate-box{
  width: 80%;
  margin:0 auto;
  color: #494949;
}
.erweima img{
  width: 10rem;
}

/* 第二部分模块 */
.jiamisuo{
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  cursor: pointer;
}

/* 专业三屏--第四部分 */
.sanp-img{
  margin: 0 auto;
  margin-top: 3rem;
}
.sanp-img img{
  width: 100%;
}

/* 电动车模拟--第七部分 */
.three-buttom{
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 3rem;
}
.three-buttom img{
  width: 30%;
}
.bottom-bg{
  background: url("../assets/image/index/bottombg.jpg");
  background-size: cover;
  box-sizing: border-box;
  padding: 3rem 0;
  width: 100%;
}
.bottom-bg .part-head-one-1{
  cursor: pointer;
}
.bottom-bg .part-head-one-1:hover{
  color: #0D7AF9;
}
.bottom-bg img{
  cursor: pointer;
}
/* footer */
.footer-bg{
  position: relative;
  height: 10rem;
  background: url("../assets/image/index/footer.jpg");
  background-size: cover;
}
.Footer{
  position: absolute;
  bottom: 0;
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    padding-bottom: 1rem;
    border-top: 1px solid white;
    color: white;
}
.Footer ul li{
    list-style: none;
    float: left;
    padding: 0.5rem;
}
.Footer ul{
   display: inline-block;
}
.Footer a{
    text-decoration: none;
    color: white;
}

/* 卡片切换 */
.cardBanner{
  width: 80%;
	padding: 0 2rem;
  margin: 0 auto;
	position: relative;
  margin-bottom: 3rem;
  margin-top: 5rem;
}
.cardBanner ul{
	display: flex;
	overflow: scroll;    /*设置滚动条*/
}
.cardBanner ul::-webkit-scrollbar{    /*隐藏滚动条*/
	display: none;
}
.cardBanner ul>li{ 
	width: 31.33333%;
	flex-shrink: 0;
	padding-left: 3%;
	text-align: center;
}
.cardBanner ul>li:first-child{
	padding-left: 0;
}
.cardBanner ul>li a{
	display: block;
	width: 100%;
	height: 100%;
}
.cardBanner ul>li img{
	width: 100%;
	/* height: 170px; */
}
.cardBanner ul>li p{
	margin: 0;
}
[class^='arrow']{
	font-size: 2rem;
	transform: scaleX(0.5);
  transform: scaleY(1.5);
	color:black;
}
.arrow-left{
	position: absolute;
	left: -1rem;
	top: calc(50% - 1.5rem);
  cursor: pointer;
}
.arrow-right{
	position: absolute;
	right: -1rem;
	top: calc(50% - 1.5rem);
  cursor: pointer;
}

</style>